<!DOCTYPE html>
<html>
<head>
	<title>UED分享</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<script type="text/javascript">
    	var _html = document.getElementsByTagName('html')[0];
		var ch = document.documentElement.clientWidth;
		if(ch > 750){
		    _html.style.fontSize = '100px';
		}else{
		    _html.style.fontSize = ch*100/375 + 'px';
		}
    </script>
    <style type="text/css">
        *{
    		padding: 0;
    		margin: 0;
    	}
    	.wrapper{
			display: none;
    		position: fixed;
    		top: 0;
    		bottom: 0;
    		width: 100%;
    		background: rgba(0,0,0,.6);
    		font-size: 15px;
    		color: #ffffff;
			overflow: hidden;
    	}
    	.click_btn{
    		display: block;
    		position: absolute;
    		right: .2rem;
    		top: .15rem;
    		width: .42rem;
    		height: .72rem;
    	}
    	.click_btn img{
    		position: absolute;
    		width: .42rem;
    		height: .72rem;
    	}
    	.num{
    		display: inline-block;
    		width: .22rem;
    		height: .22rem;
    		margin-right: 5px;
    		line-height: .22rem;
    		text-align: center;
    		background: #2b7deb;
    		border-radius: 50%;
    	}
    	.content{
    		position: absolute;
    		top: 1rem;
    		left: 50%;
    		transform: translateX(-50%);
    		width: 3rem;
    	}
    	.item{
    		margin-bottom: .2rem;
    		line-height: .22rem;
			font-size: .16rem;
    	}
    	.icon{
		    position: relative;
            bottom: 1px;
    		display: inline-block;
    		width: .3rem;
    		height: .3rem;
    		margin: 0 3px;
    		vertical-align: middle;
    	}
		.menu-icon{
		    background: url('./images/menu.png') no-repeat;
    		background-size: cover;
		}
		.browser-icon{
		    background: url('./images/safari.png') no-repeat;
    		background-size: cover;
		}
		.android-browser-icon{
		    width: 1.35rem;
            height: .3rem;
		    background: url('./images/android.png') no-repeat;
    		background-size: cover;
		}
        .huan{
            display: none;
        }
    </style>
</head>

<body>
    <a href="JavaScript:;" class="huan">唤起app</a>
    <div class="wrapper" id="iOS-wrap">
		<span class="click_btn"><img src="./images/click_btn.png" alt=""></span>
		<div class="content">
			<div class="item">
				<span class="num">1</span>点击右上角<i class="icon menu-icon"></i>打开菜单
			</div>
			<div class="item">
				<span class="num">2</span>选择<i class="icon browser-icon"></i>用Safari浏览器打开
			</div>
		</div>
	</div>
	<div class="wrapper" id="Android-wrap">
		<span class="click_btn"><img src="./images/click_btn.png" alt=""></span>
		<div class="content">
			<div class="item">
				<span class="num">1</span>点击右上角<i class="icon menu-icon"></i>打开菜单
			</div>
			<div class="item">
				<span class="num">2</span>选择<i class="icon android-browser-icon"></i>
			</div>
		</div>
	</div>

    <script src="./js/jquery-1.8.3.js"></script> 
    <script src="./layer/mobile/layer.js"></script>
    <script src="./js/share.js"></script> 
    
</body>

</html>